
<script language='javascript' src="{$_G['URL']['APP_RESOURCE_FOX']}js/designer.js"></script>
<script language='javascript' src="{$_G['URL']['APP_RESOURCE_FOX']}js/jquery.contextMenu.js"></script>
<script language='javascript' src="{$_G['URL']['APP_RESOURCE_FOX']}js/jquery.form.js"></script>
<script language='javascript' src="{$_G['URL']['APP_RESOURCE_FOX']}js/jquery.gcjs.js"></script>
<script language='javascript' src="{$_G['URL']['APP_RESOURCE_FOX']}js/tooltipbox.js"></script>
<link href="{$_G['URL']['APP_RESOURCE_FOX']}js/jquery.contextMenu.css" rel="stylesheet">
<style type='text/css'>
    {php $poster_width = $config['poster_size']>0?375:320;}
    {if $config['poster_size']==2}
    {php $poster_height = 809;}
    {elseif $config['poster_size']==1}
    {php $poster_height = 750;}
    {else}
    {php $poster_height = 504;}
    {/if}
    #poster {
        width: {$poster_width}px;height: {$poster_height}px;border:1px solid #ccc;position:relative
    }
    #poster .bg { position:absolute;width:100%;height:100%;z-index:0}
    #poster .drag[type=img] img,#poster .drag[type=thumb] img { width:100%;height:100%; }
    #poster .drag { position: absolute; width:80px;height:80px; border:1px solid #000; }


    #poster .drag[type=nickname] { width:80px;height:40px; font-size:16px; font-family: 黑体;}
    #poster .drag[type=username] { width:80px;height:40px; font-size:16px; font-family: 黑体;}
    #poster .drag img {position:absolute;z-index:0;width:100%; }

    #poster .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{
        position:absolute;
        width:7px;
        height:7px;
        z-index:1;
        font-size:0;
    }

    #poster .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{
        background:#C00;
    }
    .rLeftDown,.rRightUp{cursor:ne-resize;}
    .rRightDown,.rLeftUp{cursor:nw-resize;}
    .rRight,.rLeft{cursor:e-resize;}
    .rUp,.rDown{cursor:n-resize;}
    .rLeftDown{left:-4px;bottom:-4px;}
    .rRightUp{right:-4px;top:-4px;}
    .rRightDown{right:-4px;bottom:-4px;}
    .rRightDown{background-color:#00F;}

    .rLeftUp{left:-4px;top:-4px;}
    .rRight{right:-4px;top:50%;margin-top:-4px;}
    .rLeft{left:-4px;top:50%;margin-top:-4px;}
    .rUp{top:-4px;left:50%;margin-left:-4px;}
    .rDown{bottom:-4px;left:50%;margin-left:-4px;}
    .context-menu-layer { z-index:9999;}
    .context-menu-list { z-index:9999;}

</style>


<script type="text/javascript">
    function submitForm(){
        var form = document.getElementById("myform");
        form.submit();
    }
</script>
{if $system['isheadposter'] == '1' || $system['ispresale']==1 || $config['get_mystery_boxes']==1 || $config['get_mystery_boxes']==3}
<ul class="nav nav-tabs">
    <li role="presentation" class="{php echo $status == 0?active:'';}"><a href="#" >海报</a></li>
    {if $system['isheadposter'] == '1'}
    <li role="presentation" class="{php echo $status == 1?active:'';}"><a href="#" onclick="goto_url('poster1')" >活动首图海报</a></li>
    {/if}
    {if $system['ispresale']==1}
    <li role="presentation" class="{php echo $status == 3?active:'';}"><a href="#" onclick="goto_url('poster3')" >补款海报</a></li>
    {/if}
    {if $config['get_mystery_boxes']==1 || $config['get_mystery_boxes']==3}
    <li role="presentation" class="{php echo $status == 2?active:'';}"><a href="#" onclick="goto_url('poster2')" >盲盒海报</a></li>
    {/if}
</ul>
{/if}

    <div class="tab-content">

        <div class="tab-pane active"   id="tab_design">{include file='design'}</div>
    </div>
    <input type="hidden" name="__token__" value="{$Request.token}">
    <input type="hidden" name="data" value="" />
<script language='javascript' src="{$_G['URL']['APP_RESOURCE_FOX']}js/jquery.contextMenu.js"></script>
<script language='javascript'>
    $(window).bind('keydown', function(event) {
        if (event.ctrlKey || event.metaKey) {
            switch (String.fromCharCode(event.which).toLowerCase()) {
                case 's':
                    event.preventDefault();
                    $("#submit").click()
                    break;
            }
        }
    });

    $('form').submit(function(){


        var data = [];
        $('.drag').each(function(){
            var obj = $(this);
            var type = obj.attr('type');
            var left = obj.css('left'),top = obj.css('top');
            var d= {left:left,top:top,type:obj.attr('type'),width:obj.css('width'),height:obj.css('height')};
            if(type=='username' || type=='nickname' ||type=='title' || type=='marketprice' || type=='productprice'){
                d.size = obj.attr('size');
                d.color = obj.attr('color');
            } else if(type=='qr'){
                d.size = obj.attr('size');
            } else if(type=='img'){
                d.src = obj.attr('src');
            }
            data.push(d);
        });
        $(':input[name=data]').val( JSON.stringify(data));
        $('form').removeAttr('stop');
        return true;
    });

    function bindEvents(obj){

        var index = obj.attr('index');

        var rs = new Resize(obj, { Max: true, mxContainer: "#poster" });
        rs.Set($(".rRightDown",obj), "right-down");
        rs.Set($(".rLeftDown",obj), "left-down");
        rs.Set($(".rRightUp",obj), "right-up");
        rs.Set($(".rLeftUp",obj), "left-up");
        rs.Set($(".rRight",obj), "right");
        rs.Set($(".rLeft",obj), "left");
        rs.Set($(".rUp",obj), "up");
        rs.Set($(".rDown",obj), "down");
        rs.Scale = true;
        var type = obj.attr('type');
        if(type=='username' ||type=='nickname' || type=='img' || type=='title' || type=='marketprice' || type=='productprice'){
            rs.Scale = false;
        }
        new Drag(obj, { Limit: true, mxContainer: "#poster" });
        $('.drag .remove').unbind('click').click(function(){
            $(this).parent().remove();
        })
        
            $.contextMenu({
                selector: '.drag[index=' + index + ']',
                callback: function(key, options) {
                    var index = parseInt($(this).attr('zindex'));

                    if(key=='next'){
                        var nextdiv = $(this).next('.drag');
                        if(nextdiv.length>0 ){
                            nextdiv.insertBefore($(this));
                        }
                    } else if(key=='prev'){
                        var prevdiv = $(this).prev('.drag');
                        if(prevdiv.length>0 ){
                            $(this).insertBefore(prevdiv);
                        }
                    } else if(key=='last'){
                        var len = $('.drag').length;
                        if(index >=len-1){
                            return;
                        }
                        var last = $('#poster .drag:last');
                        if(last.length>0){
                            $(this).insertAfter(last);
                        }
                    }else if(key=='first'){
                        var index = $(this).index();
                        if(index<=1){
                            return;
                        }
                        var first = $('#poster .drag:first');
                        if(first.length>0){
                            $(this).insertBefore(first);
                        }
                    }else if(key=='delete'){
                        $(this).remove();
                    }
                    var n =1 ;
                    $('.drag').each(function(){
                        $(this).css("z-index",n);
                        n++;
                    })
                },
                items: {
                    "next": {name: "调整到上层"},
                    "delete": {name: "删除元素"},
                    "prev": {name: "调整到下层"},
                    "last": {name: "调整到最顶层"},
                    "first": {name: "调整到最低层"}
                }
            });
            obj.unbind('click').click(function(){
                bind($(this));
            })


    }
    var imgsettimer = 0 ;
    var nametimer = 0;
    var bgtimer = 0 ;
    function bindType(type){
        $("#goodsparams").hide();
        $(".type4").hide();
        if(type=='4'){
            $(".type4").show();
        } else if(type=='3'){
            $("#goodsparams").show();
        }
    }

    function clearTimers(){
        clearInterval(imgsettimer);
        clearInterval(nametimer);
        clearInterval(bgtimer);

    }
    function getImgUrl(val){
        if(val.indexOf('http')==-1){
            val = "{$_G['attachurl_remote']}" + val;
        }
        return val;
    }
    function bind(obj){
        var imgset = $('#imgset'), nameset = $("#nameset"),qrset = $('#qrset');
        imgset.hide(),nameset.hide(),qrset.hide();
        clearTimers();
        var type = obj.attr('type');
        if(type=='img'){
            imgset.show();
            var src = obj.attr('src');
            var input = imgset.find('input');
            var img = imgset.find('img');
            if(typeof(src)!='undefined' && src!=''){
                input.val(src);
                img.attr('src',getImgUrl(src));
            }

            imgsettimer = setInterval(function(){
                if(input.val()!=src && input.val()!=''){
                    var url = getImgUrl(input.val());

                    obj.attr('src',input.val()).find('img').attr('src',url);
                }
            },10);

        } else if(type=='username' || type=='nickname' || type=='title' || type=='marketprice' || type=='productprice'){

            nameset.show();
            var color = obj.attr('color') || "#000";
            var size = obj.attr('size') || "8";
            var input = nameset.find('input:first');
            var namesize = nameset.find('#namesize');
            var picker = nameset.find('.sp-preview-inner');
            input.val(color); namesize.val(size.replace("px",""));
            picker.css( {'background-color':color,'font-size':size});

            nametimer = setInterval(function(){
                obj.attr('color',input.val()).find('.text').css('color',input.val());
                obj.attr('size',namesize.val() +"px").find('.text').css('font-size',namesize.val() +"px");
            },10);

        } else if(type=='qr'){
            qrset.show();
            var size = obj.attr('size') || "3";
            var sel = qrset.find('#qrsize');
            sel.val(size);
            sel.unbind('change').change(function(){
                obj.attr('size',sel.val())
            });
        }
    }

    $(function(){
        $('.drag').each(function(){
            bindEvents($(this));
        })

        $(':radio[name=type]').click(function(){
            var type = $(this).val();
            bindType(type);
        })

        $(':radio[name=resptype]').click(function(){
            var type = $(this).val();
            if(type == 1)
            {
                $(".resptype1").show();
                $(".resptype0").hide();
            }
            else
            {
                $(".resptype0").show();
                $(".resptype1").hide();
            }
        })
        //改变背景
        $('#bgset').find('button:first').click(function(){
            var oldbg = $(':input[name=bg]').val();
            bgtimer = setInterval(function(){
                var bg = $(':input[name=bg]').val();
                if(oldbg!=bg){
                    bg = getImgUrl(bg);

                    $('#poster .bg').remove();
                    var bgh = $("<img src='" + bg + "' class='bg' />");
                    var first = $('#poster .drag:first');
                    if(first.length>0){
                        bgh.insertBefore(first);
                    } else{
                        $('#poster').append(bgh);
                    }

                    oldbg = bg;
                }
            },10);
        })

        $('.btn-com').click(function(){

            var imgset = $('#imgset'), nameset = $("#nameset"),qrset = $('#qrset');
            imgset.hide(),nameset.hide(),qrset.hide();
            clearTimers();

            if($('#poster img').length<=0){
                //alert('请选择背景图片!');
                //return;
            }
            var type = $(this).data('type');
            var img = "";
            if(type=='qr'){
                img = '<img src="{$_G['URL']['APP_RESOURCE_FOX']}images/qr.jpg" />';
            }
            else if(type=='head'){
                {if $system['wxapp']!=0 && $system['softmode']!=0}
                img = '<img src="{$_G['URL']['APP_RESOURCE_FOX']}images/head.png" />';
                {else}
                img = '<img src="{$_G['URL']['APP_RESOURCE_FOX']}images/head.jpg" />';
                {/if}
            }else  if(type=='img' || type=='thumb'){
                img = '<img src="{$_G['URL']['APP_RESOURCE_FOX']}images/img.jpg" />';
            }
            else if(type=='nickname') {
                img = '<div class=text>昵称</div>';
            }
            else if(type=='username'){
                    img = '<div class=text>姓名</div>';
            }
            var index = $('#poster .drag').length+1;
            var obj = $('<div class="drag" type="' + type +'" index="' + index +'" style="z-index:' + index+'">' +
                img+'<div class="rRightDown"> </div><div class="rLeftDown"> </div><div class="rRightUp"> </div><div class="rLeftUp"> </div><div class="rRight"> </div><div class="rLeft"> </div><div class="rUp"> </div><div class="rDown"></div></div>');

            $('#poster').append(obj);

            bindEvents(obj);

        });

        $('.drag').click(function(){
            bind($(this))     ;
        })

    })


</script>
<script type="text/javascript">
    function submitForm(){
        var form = document.getElementById("myform");
        form.submit();
    }
</script>